<template>
  <view class="catalog">
    <view class="text-base text-sm font-bold my-4">
      共{{ list.length }}讲，可观看{{ mayPlayNum }}讲
    </view>

    <view class="">
      <view class="flex relative py-[28rpx] px-4 bg-[#F4F4F4] mb-[20rpx] rounded-sm text-[30rpx]"
        v-for="(item, index) in list" :key="index" @click="handleClickPlay(item, index)">
        <image v-if="index == modelValue" class="absolute top-0 left-0 w-[36rpx] h-[36rpx]"
          src="/static/images/selected_play.png"></image>
        <text>{{ padZero(index + 1) }}</text>
        <text class="flex-1 ml-[12rpx]">{{ item.title }}</text>
        <image class="w-[46rpx] h-[46rpx]" :src="getStatusIcon(item.is_free, index)"></image>
      </view>
    </view>

  </view>
</template>

<script setup>
import { padZero } from "@/utils/format";
const props = defineProps({
  modelValue: {
    type: Number,
    required: true
  },
  list: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['update:modelValue']);

const mayPlayNum = computed(() => props.list.filter(item => item.is_free == 1).length);

function getStatusIcon(is, index) {
  if (is == 1 && index == props.modelValue) {
    return '/static/images/underway_play.png'
  }

  const icons = {
    1: "/static/images/may_play.png",
    2: "/static/images/lock_play.png"
  }
  return icons[is];
}

function handleClickPlay(item, index) {
  if (item.is_free == 1) {
    emit('update:modelValue', index);
  } else {
    emit('unlock', item);
  }
}

</script>

<style lang="scss" scoped></style>
